<template>
	<view>
		
		<view class="flex-no-horizontal" style="justify-content: center;">
			<view class="code-img flex-no-horizontal">
				<image :src="detail.qrCode" mode="" @click="imgSave"></image>
			</view>
		</view>
		<view class="subhead f-s" style="margin-bottom: 100rpx;">
			单击图片保存
		</view>
		
		<view class="title f-xl">
			{{detail.title}}
		</view>
		
		<view class="subhead f-s">
			{{detail.tips}}
		</view>
		
	</view>
</template>

<script>
	import {customerServiceApi} from '../../api/collection.js'
	import {saveImg} from '../../utility/download.js'
	export default {
		
		data () {
			return{
				detail:{
					title:'',
					tips:'',
					qrCode:''
				}
			}
		},
		onLoad() {
			this.getDate()
		},
		methods:{
			async getDate(){
				try{
					const res = await customerServiceApi()
					this.detail = res.data
				}catch(e){
					//TODO handle the exception
					uni.showToast({
						title: e.message || e.data,
						icon: 'none'
					})
				}
			},
			
			//保存图片
			imgSave(){
				saveImg(this.detail.qrCode)
			},
			
		}
	}
	
</script>

<style lang="scss">
	.code-img{
		width: 360rpx;
		height: 360rpx;
		margin: 200rpx 0 0 0;
		justify-content: center;
		padding: 15rpx;
		border: 2rpx solid rgba(218, 223, 228, 1);
		border-radius: 10rpx;
		image{
			width: 330rpx;
			height: 330rpx;
		}
	}
	
	.title{
		color: #000;
		text-align: center;
		// font-weight: bold;
	}
	
	.subhead{
		text-align: center;
		margin-top: 28rpx;
		color: RGBA(130, 131, 140, 1);
	}
	
</style>
